import React, { FC, useEffect, useState } from 'react'
import { Tabs } from 'antd'
import route from '../../Router/index'
import { CloseOutlined } from '@ant-design/icons'
import './topnav.less'
import { Link, useHistory } from 'react-router-dom'
const { TabPane } = Tabs
interface Props {}
/* 通常顶部导航栏,都是储存在共享状态管理中(store或者vuex)  会根据用户的拥有哪些路由来渲染,用户点击那个菜单就会添加一条,删除某条数据就删除某条(不管是什么操作都是从本地和状态中一起操作该条数据)  这里使用Link跳转 */
/* 
    path  路由跳转路径
    key   唯一值
    name  标签名
*/
const TopNav: FC<Props> = props => {
	const history = useHistory()
	const [navData, setNavData] = useState<any>([])
	const [active, setActive] = useState<string>('home')
	/* 根据key值来删除对应的标签 */
	const removeNav = (key:any) => {
		setNavData((val:any) => {
			return val.filter((item:any) => item.key !== key)
		})
		// 删除本地的对应的标签
	}
	const tabLink = (key:any) => {
		setActive(key)
		history.push(`${key}`)
	}
	useEffect(() => {
		console.log(route)
		setNavData(route)
	}, [])
	return (
		<div className='topnav'>
			<Tabs
				type='editable-card'
				onEdit={removeNav}
				onTabClick={tabLink}
				activeKey={active}
				hideAdd={true}
				tabBarGutter={0}>
				{navData.map((item:any) => (
					<TabPane tab={item.name} key={item.key}></TabPane>
				))}
			</Tabs>
		</div>
	)
}
export default TopNav
